<template>
    <div>
      <h1>宠物认领中心填写表</h1>
      姓名:
      <input type="text" placeholder="请输入姓名" v-model="form.name">
      <span :class="msgInfo.name === '成功' ? 'isGreen' : 'isRed'">{{ msgInfo.name }}</span>
      <br>
      性别:
      <input type="radio" name="sex" value="male" v-model="form.sex">男
      <input type="radio" name="sex" value="female" v-model="form.sex">女
      <br>
     年龄:
     <input type="text" name="age" placeholder="请输入年龄" v-model="form.age"> 
     <span :class="msgInfo.age ===  '成功' ? 'isGreen' : 'isRed'">{{ msgInfo.age }}</span>
     <br>
     所在城市:
     <select name="city" v-model="form.city">
      <option value="suzhou">苏州</option>
      <option value="shanghai">上海</option>
      <option value="anhui">安徽</option>
      <option value="zhejiang">浙江</option>
     </select>
     <br>
     宠物:
     <input type="checkbox" value="cat" v-model="form.pets">猫
     <input type="checkbox" value="dog" v-model="form.pets">狗
     <input type="checkbox" value="fish" v-model="form.pets">鱼
     <br>
     个人介绍:
     <textarea v-model="form.desc"></textarea>
     <span :class="msgInfo.desc ===  '成功' ? 'isGreen' : 'isRed'">{{ msgInfo.desc }}</span>
     <br>
     <button @click="toSubmit">免费注册</button>
     <button @click="toRest">重置</button>
    </div>
  </template>
  
  <script>
  export default {
    data(){
      return{
       form:{
        name: '',
        sex: '',
        age: '',
        city: '',
        pets: [],
        desc: ''
        },
        msgInfo:{
          name: '',
          age: ''
        } 
      }
    },
    watch:{
      'form.name'(Val){
        this.msgInfo.name = /^[A-Z][A-Za-z0-9]{5,}$/.test(Val) ? '成功': '失败:要求首字母大写,长度大于等于6'
      },
      'form.age'(Val){
        this.msgInfo.age =/^[[A-Za-z0-9]{2,}$/.test(Val) ? '成功': '失败:您的年龄未满18周岁'
      },
      'form.desc'(Val){
         this.msgInfo.desc = this.form.desc  === Val ? '成功' :  '失败:'
      },
    },
    methods:{
      toSubmit(){
        console.log(this.form)
      },
      toRest(){
        this.form={
          name: '',
          sex: '',
          age: '',
          city: '',
          pets: [],
          desc: ''
        }
      }
    }
  }
  </script>
  
  <style>
   .isRed {
      color: red;
    }
    .isGreen {
      color: green;
    }
  </style>